<template>
	<div class="basic-setting">
		<!-- 左侧菜单 -->
		<div class="menu-container">
			<SettingMenu @menu-change="handleMenuChange" />
		</div>
		<!-- 右侧内容区域 -->
		<div class="content-container">
			<component :is="currentComponent" />
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from '@vue/composition-api'
import SettingMenu from './basicSetting/settingMenu.vue'
import PrintSetting from './basicSetting/printSetting.vue'
import PaymentMethod from './basicSetting/paymentMethod.vue'
import DeliveryMethod from './basicSetting/deliveryMethod.vue'
import CostSetting from './basicSetting/costSetting.vue'
import CalculateMethod from './basicSetting/calculatMethod.vue'

// 组件映射
const componentMap = {
	print: PrintSetting,
	payment: PaymentMethod,
	delivery: DeliveryMethod,
	fee: CostSetting,
	calculate: CalculateMethod
}

// 当前选中的菜单
const currentMenuId = ref('print')

// 动态计算当前组件
const currentComponent = computed(() => {
	return componentMap[currentMenuId.value] || PrintSetting
})

// 处理菜单切换
const handleMenuChange = (menu) => {
	currentMenuId.value = menu.id
}

onMounted(() => {
	console.log('基础设置页面已加载')
})

</script>

<style scoped>
.basic-setting {
	display: flex;
	height: 100%;
	width: 100%;
}

.menu-container {
	width: 140px;
	flex-shrink: 0;
}

.content-container {
	flex: 1;
	overflow-y: auto;
}
</style>